<template>
    <view class="gjl-view">
        <view class="main">
            <view class="type-ul">
                <view class="type-li" @click="toBookStore({bookstoreSortId: ''})">
                    <view class="title-box">
                        <view class="left">
                            <view class="title cl1">
                                全部
                            </view>
                        </view>
                    </view>
                    <view class="text" style="visibility: hidden;">
                        阅读进度：{{item.bookstoreSortProportion}}%
                    </view>
                    <view class="jindu-box" style="visibility: hidden;">
                        <mSliderOnly :value="item.bookstoreSortProportion*1"></mSliderOnly>
                    </view>
                </view>
                <view class="type-li" v-for="(item,index) in list" :key="index" @click="toBookStore(item)">
                    <view class="title-box">
                        <view class="left">
                            <view class="title cl1">
                                {{item.bookstoreSortName}}
                            </view>
                            <view class="change" v-show="changeStatus" @click.stop="showModel(item)">
                                <mIcon type="bianji" size="16" color="#8E94A3"></mIcon>
                            </view>
                        </view>
                        <view class="right" v-show="changeStatus" @click.stop="BookstoreAddSortDel(item)">
                            <mIcon type="shanchu" size="16" color="#8E94A3"></mIcon>
                        </view>
                    </view>
                    <view class="text">
                        阅读进度：{{item.bookstoreSortProportion}}%
                    </view>
                    <view class="jindu-box">
                        <!-- <slider value="60" block-size="12" activeColor="#2BA8FC" :disabled="true" backgroundColor="#F0F0F0" block-color="#F0F0F000" @change="sliderChange" step="5" /> -->
                        <mSliderOnly :value="item.bookstoreSortProportion*1"></mSliderOnly>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer-box">
            <view class="left" @click="changeStatus = !changeStatus">
                {{changeStatus?'取消编辑':'编辑'}}
            </view>
            <view class="right" @click="showModel">
                添加分类
            </view>
        </view>
        <mShowModel ref="model">
            <view class="show-box">
                <view class="inner">
                    <view class="title">
                        {{'添加分类'}}
                    </view>
                    <view class="input-box">
                        <input v-model="form.bookstoreSortName" class="uni-input" confirm-type="done" placeholder-style="color:#333;font-size:28rpx;"
                            placeholder="请输入分类名称" />
                    </view>
                    <view class="btn-box">
                        <view class="left" @click="hideModel">
                            取消
                        </view>
                        <view class="right" @click="commit">
                            确定
                        </view>
                    </view>
                </view>
            </view>
        </mShowModel>
    </view>
</template>

<script>
    import mSliderOnly from '@/components/slider-only/index.vue'
    import mShowModel from '@/components/show-model/show-model.vue'
    import service from "@/service";
    export default {
        components: {
            mSliderOnly,
            mShowModel
        },
        data() {
            return {
                changeStatus: false,
                form: {
                    bookstoreSortName: ''
                },
                listQuery: {},
                list: [],
                item: {}
            }
        },
        mounted() {
            this.BookstoreListSort()
        },
        methods: {
            // 去书屋
            toBookStore(item) {
                if(this.changeStatus){
                    return
                }
                this.$routerTo({
                    path: '/pagesMine/bookstore/index',
                    query: {
                        type: 1,
                        bookstoreSortId: item.bookstoreSortId
                    },
                    type: 'RT'
                })
            },
            // 获取分类列表
            BookstoreListSort() {
                service.mineService.BookstoreListSort({
                    data: { ...this.listQuery
                    },
                    success: res => {
                        this.list = res.result;
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 编辑分类
            BookstoreAddSortChange() {
                if (!this.form.bookstoreSortName) {
                    uni.showToast({
                        title: '分类名字不能为空',
                        icon: 'none',
                        duration: 3000
                    })
                    return
                }
                this.$refs.model.closeModel()
                service.mineService.BookstorePutSort({
                    data: { ...this.form
                    },
                    success: res => {
                        this.BookstoreListSort()
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 删除分类
            BookstoreAddSortDel(item) {
                uni.showModal({
                    title: '提示',
                    content: '是否要删除此分类',
                    success: (res) => {
                        if (res.confirm) {
                            service.mineService.BookstoreDelSort({
                                data: {
                                    bookstoreSortId: item.bookstoreSortId
                                },
                                success: res => {
                                    this.BookstoreListSort()
                                },
                                fail: () => {

                                },
                                complete: () => {
                                    uni.hideLoading();
                                },
                            });
                        } else if (res.cancel) {

                        }
                    }
                });
            },
            // 添加分类
            BookstoreAddSort() {
                if (!this.form.bookstoreSortName) {
                    uni.showToast({
                        title: '分类名字不能为空',
                        icon: 'none',
                        duration: 3000
                    })
                    return
                }
                this.$refs.model.closeModel()
                service.mineService.BookstoreAddSort({
                    data: { ...this.form
                    },
                    success: res => {
                        this.BookstoreListSort()
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 确认
            commit() {
                if (this.form.bookstoreSortId) {
                    this.BookstoreAddSortChange()
                } else {
                    this.BookstoreAddSort()
                }
            },
            // 显示弹框
            showModel(item) {
                this.$refs.model.showModel()
                if (item) {
                    this.form = { ...item
                    }
                } else {
                    this.form.bookstoreSortId = ''
                }
            },
            hideModel() {
                this.$refs.model.closeModel()
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        overflow: hidden;
        height: 100%;
        background: rgba(249, 249, 249, 1);

        .show-box {
            .inner {
                width: 550rpx;
                box-sizing: border-box;
                padding: 30rpx 30rpx;
                background-color: #fff;

                .title {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #333;
                }

                .input-box {
                    margin-top: 30rpx;
                    width: 100%;
                    display: flex;
                    background: rgba(249, 249, 249, 1);
                    box-sizing: border-box;
                    padding: 20rpx 30rpx;

                    .uni-input {
                        flex: 1 1 auto;
                    }
                }

                .btn-box {
                    margin-top: 20rpx;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .left {
                        padding: 24rpx 0;
                        box-sizing: border-box;
                        min-width: 180rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(43, 168, 252, 1);
                        border: 1px solid rgba(43, 168, 252, 1);
                        border-radius: 4rpx;
                    }

                    .right {
                        padding: 24rpx 0;
                        min-width: 150rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        background: rgba(43, 168, 252, 1);
                        border-radius: 4rpx;
                    }
                }

            }
        }

        .footer-box {
            padding: 11rpx 25rpx;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -2px 10px rgba(136, 136, 136, 0.16);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                padding: 24rpx 0;
                box-sizing: border-box;
                min-width: 335rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(43, 168, 252, 1);
                border: 1px solid rgba(43, 168, 252, 1);
                border-radius: 4rpx;
            }

            .right {
                padding: 24rpx 0;
                min-width: 335rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                background: rgba(43, 168, 252, 1);
                border-radius: 4rpx;
            }
        }

        .main {
            margin: 0 30rpx;

            .type-ul {
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;

                .type-li {
                    margin-bottom: 20rpx;
                    box-sizing: border-box;
                    padding: 23rpx 20rpx 20rpx;
                    width: 335rpx;
                    background: rgba(255, 255, 255, 1);

                    .title-box {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .left {
                            display: flex;
                            align-items: center;

                            .title {
                                font-size: 32rpx;
                                font-weight: bold;
                                color: rgba(51, 51, 51, 1);
                            }

                            .change {
                                margin-left: 14rpx;
                            }
                        }

                        .right {}
                    }

                    .text {
                        margin-top: 15rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(153, 153, 153, 1);
                    }

                    .jindu-box {
                        height: 10rpx;
                        width: 100%;
                        margin-top: 14rpx;
                    }
                }
            }
        }
    }
</style>
